<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>vertical float bottom</title>
<style type="text/css">
/* <![CDATA[ */
#container
	{
	position: relative;
	top: -20px;
	left: -10px;
	background: green;
	}
/* IE 5/Mac needs some extra love and attention otherwise it still collapses the container */
* html>body #container
	{
	float: left;
	}

* html #container
	{
	height: 1%;
	}

/* Easy Clearing off */
#header
	{
	position: absolute;
	top: 0px;
	width: 100%;
	height: 100px;
	background: #ff0000;
	}
#footer
	{
	position: absolute;
	bottom: -50px;
	width: 100%;
	height: 50px;
	background: #ffcc00;
	}
* html #footer
	{
	width: 100%; /* sets width to containing element's, rather than antecedent positioned element - both PC and Mac */
	}
	
	
#left
	{
		position: absolute;
		top: 100px;
		left: 0px;
		width: 200px;
		height: 400px;
		background: yellow;
	}
#container #content 
{
	position: relative;
	left: 200px;
	top: 100px;	
	right: 200px;
	background: pink;
	
}
/* ]]> */
</style>
</head>
<body>

<div id="container">
	<div id="content">
		<p>Content 1</p>
		<p>Content 2</p>
		<p>Content 3</p>
		<p>Content 4</p>
		<p>Content 5</p>
		<p>Content 6</p>
		<p>Content 7</p>
		<p>Content 8</p>
		<p>Content 9</p>
		<p>Content 10</p>
		<p>Content 1</p>
		<p>Content 2</p>
		<p>Content 3</p>
		<p>Content 4</p>
		<p>Content 5</p>
		<p>Content 6</p>
		<p>Content 7</p>
		<p>Content 8</p>
		<p>Content 9</p>
		<p>Content 10</p>
		<p>Content 1</p>
		<p>Content 2</p>
		<p>Content 3</p>
		<p>Content 4</p>
		<p>Content 5</p>
		<p>Content 6</p>
		<p>Content 7</p>
		<p>Content 8</p>
		<p>Content 9</p>
		<p>Content 10</p>
		<p><a href="/alex/css/cssjunk/verticalfloatbottom?short=1">Make content shorter</a></p>
	</div>
	
	<div id="header">
		<p>Header</p>
	</div>
	<div id="footer">
		<p>Footer</p>
	</div>	

	<div id="left">
		<p>Left</p>
	</div>
</div>

</body>
</html>
